<template>
  <view class="mes-form-item" @tap="tapFormItem">
    <!-- <text class="star color-red" v-if="config.required">*</text> -->
    <view class="left-title">
      <view>{{ config.title }}</view>
      <view v-if="config.tip" class="left-tip">
        <text class="iconfont" :class="config.tip_icon || 'icon-tishi'"></text>
        <text>{{ config.tip }}</text>
      </view>
    </view>
    <view class="right-slot">
      <mes-form-slots
        class="w-full"
        ref="formSlotsRef"
        :row="row"
        :slots="config.slots"
      ></mes-form-slots>
      <text
        v-if="config.slots.icon && !config.slots.is_detail"
        class="iconfont"
        :class="icon"
      >
      </text>
    </view>
  </view>
</template>

<script>
/**
 * 1. onMounted 时触发全局自定义事件 form-item-created，参数为表单规则验证函数
 */

import { onMounted, ref } from 'vue'
import mesFormSlots from '@/components/mes/mes-form-slots'

export default {
  components: { mesFormSlots },
  props: {
    row: Object, 
    config: Object
  },
  setup(props, context) {
    onMounted(() => {
      uni.$emit('form-item-created', validateFormItem)
    })

    // 表单规则验证
    const validateFormItem = () => {
      if (props.config.rules) {
        const allPassed = props.config.rules.every((rule) => {
          let passed = true
          let message = rule.message
          switch (rule.type) {
            case 'required':
              if (rule.validator) {
                // 自定义校验规则：rule value callback
                rule.validator(
                  rule,
                  props.row[props.config.slots.field],
                  (errorMessage) => {
                    if (errorMessage) {
                      message = errorMessage
                      passed = false
                    } else {
                      passed = true
                    }
                  }
                )
                break // 不能用 return
              }
              if (
                props.row[props.config.slots.field] === null ||
                props.row[props.config.slots.field] === undefined
              ) {
                passed = false
              } else {
                passed =
                  (props.row[props.config.slots.field] + '').trim() !== ''
              }
              break
            default:
              break
          }
          if (!passed) {
            uni.showToast({
              title: message,
              icon: 'none'
            })
          }
          return passed
        })
        return allPassed
      }
      return true
    }

    // 点击整个 form-item
    const formSlotsRef = ref(null)

    const tapFormItem = () => {
      if (props.config.slots.tapIcon) {
        props.config.slots.tapIcon()
      } else {
        formSlotsRef.value.selectVisible && formSlotsRef.value.selectVisible()
        formSlotsRef.value.batchVisible && formSlotsRef.value.batchVisible()
      }
    }

    return {
      formSlotsRef,
      tapFormItem
    }
  },
  computed: {
    icon() {
      let icon = ''
      if (this.config.slots.icon) {
        switch (this.config.slots.icon) {
          case 'arrow':
            icon = 'icon-xiangyou1 color-999 font-size-24'
            break
          case 'scan':
            icon = 'icon-tiaoxingma color-000'
          case 'yield':
            icon = 'icon-gengduo1 color-999'
            break
        }
      }
      return icon
    }
  }
}
</script>

<style lang="less" scoped>
.mes-form-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  color: #111111;
  .star {
    position: absolute;
    top: 50%;
    left: -15rpx;
    transform: translateY(-50%);
  }
  .left-title {
    min-width: 10rpx;
    margin-right: 20rpx;
    .left-tip {
      font-size: 22rpx;
      color: #666666;
      .iconfont {
        display: inline-block;
        margin-right: 4rpx;
        font-size: 24rpx;
      }
    }
  }
  .right-slot {
    overflow: hidden;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    mes-form-slots {
      overflow: hidden;
    }
    .iconfont {
      padding-left: 12rpx;
    }
  }
}
</style>
